<template>
    <div id="gauge" ref="canvas" class="canvas" :style="{width: '100%', height: canHeight + 'px'}"></div>
</template>
<script setup lang="ts">
import { defineProps, computed, onMounted } from 'vue'
import * as echarts from 'echarts/core';
import { GaugeChart, type GaugeSeriesOption } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';
import {
  TitleComponent,
  type TitleComponentOption,  
  TooltipComponent,
  type TooltipComponentOption,
  LegendComponent,
  type LegendComponentOption,
  GridComponent,
  type GridComponentOption,
} from 'echarts/components';

echarts.use([TitleComponent,TooltipComponent,LegendComponent,GaugeChart, CanvasRenderer,GridComponent]);
type EChartsOption = echarts.ComposeOption<
    GaugeSeriesOption | TitleComponentOption | TooltipComponentOption | LegendComponentOption 
    | FunnelSeriesOption
    | GridComponentOption
>;

const props = defineProps({
    canvasHeight: {
        type:Number,
        default: 300
    },
    data: {
        type: Object,
        default: () => { } 
    }
})
let canHeight = computed(() => { return props.canvasHeight})
onMounted(() => {
    var chartDom = document.getElementById('gauge');
    var myChart = echarts.init(chartDom);
    var option: EChartsOption;

    option = {
        title: {
            text: '设备耗损程度',
            align: 'center',
            top: 20,
            left: 20,
            textStyle: {
                color: "#ffffff",
                fontSize: 16
            }
        },
        grid: {
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            containLabel: true
        },
        series: [
            {
            type: 'gauge',
            startAngle: 180,
            endAngle: 0,
            center: ['50%', '80%'],
            radius: '90%',
            min: 0,
            max: 1,
            splitNumber: 8,
            axisLine: {
                lineStyle: {
                width: 6,
                color: [
                    [0.25, '#FF6E76'],
                    [0.5, '#FDDD60'],
                    [0.75, '#58D9F9'],
                    [1, '#7CFFB2']
                ]
                }
            },
            pointer: {
                icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
                length: '12%',
                width: 20,
                offsetCenter: [0, '-60%'],
                itemStyle: {
                color: 'auto'
                }
            },
            axisTick: {
                length: 12,
                lineStyle: {
                color: 'auto',
                width: 2
                }
            },
            splitLine: {
                length: 20,
                lineStyle: {
                color: 'auto',
                width: 5
                }
            },
            axisLabel: {
                color: '#fefefe',
                fontSize: 16,
                distance: -60,
                rotate: 'tangential',
                formatter: function (value) {
                if (value === 0.875) {
                    return '高';
                } else if (value === 0.625) {
                    return '中上';
                } else if (value === 0.375) {
                    return '中';
                } else if (value === 0.125) {
                    return '低';
                }
                return '';
                }
            },
            title: {
                offsetCenter: [0, '-10%'],
                fontSize: 16,
                color: "#1d89e4",
            },
            detail: {
                fontSize: 30,
                offsetCenter: [0, '-35%'],
                valueAnimation: true,
                formatter: function (value) {
                return Math.round(value * 100) + '';
                },
                color: 'inherit'
            },
            data: props.data.seriesDataList,
            }
        ]
    };

    option && myChart.setOption(option);


})
</script>

<style scope>
</style>